<template>
  <div>
    <u-cell-group :border="false">
      <div class="navigate">
        <!--                外部链接  start-->
        <div
          v-if="
            item &&
            item.hasOwnProperty('url') &&
            item.navigateType === NAVIGATE_TYPE.OUTSIDE
          "
        >
          <view style="width: 100%">
            <u--input
              style="height: 1rem"
              placeholder="请输入外部链接"
              border="surround"
              v-model="item.url"
            ></u--input>
          </view>
        </div>
        <!--                外部链接  end-->
        <!--                应用自身  start-->
        <div
          v-if="
            item &&
            item.hasOwnProperty('path') &&
            item.navigateType === NAVIGATE_TYPE.SELF
          "
        >
          <cus-cell style="width: 100%">
            <div slot="title">
              页面选择:
              <text
                class="choose-page"
                @click="handleChoosePage(item, listIndex)"
                >{{ item.path ? "更改" : "选择" }}</text
              >
            </div>
            <div class="u-slot-value">
              <div
                style="width: 100%; margin-bottom: 5px"
                v-if="item.navigateOptions"
              >
                页面：{{ item.navigateOptions.name }}
              </div>
              <div class="flex-align-items-center navigate-input">
                <span style="margin-right: 5px">路径:</span>
                <u--input
                  placeholder="请输入应用自身路径"
                  border="surround"
                  v-model="item.path"
                ></u--input>
              </div>
            </div>
          </cus-cell>
        </div>
        <!--                应用自身  end-->
        <!--                企业客服  start-->
        <div
          :border="false"
          v-if="
            item &&
            item.hasOwnProperty('serviceChatUrl') &&
            item.navigateType === NAVIGATE_TYPE.SERVICE_CHAT
          "
        >
          <div class="u-slot-value">
            <div class="flex-align-items-center navigate-input">
              <span style="margin-right: 5px">客服链接：</span>
              <u--input
                placeholder="请输入客服链接"
                border="surround"
                v-model="item.serviceChatUrl"
              ></u--input>
            </div>
            <div
              class="flex-align-items-center navigate-input"
              style="margin-top: 10px"
            >
              <span style="margin-right: 5px">企业ID：</span>
              <u--input
                placeholder="请输入企业ID"
                border="surround"
                v-model="item.serviceChatID"
              ></u--input>
            </div>
          </div>
        </div>
        <!--                企业客服  end-->
      </div>
    </u-cell-group>
    <navigate-modal
      :show.sync="isShowNavigation"
      ref="navigateModalRef"
      @confirm="handleInsetPagePath"
    />
  </div>
</template>

<script>
import { NAVIGATE_TYPE } from "@/const/widget";
export default {
  props: {
    listIndex: {
      type: Number,
      default: -1,
    },
  },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
    item({ editConfigCom, listIndex }) {
      return editConfigCom.attribute.list[listIndex];
    },
  },
  data() {
    return {
      isShowNavigation: false,
      NAVIGATE_TYPE,
    };
  },
  created() {},
  methods: {
    handleChoosePage(row) {
      this.isShowNavigation = true;
      this.$nextTick(() => {
        this.$nextTick(() => {
          this.$refs.navigateModalRef.open(row?.navigateOptions);
        });
      });
    },
    handleInsetPagePath(e) {
      this.editConfigCom.attribute.list[this.listIndex].path = e.path;
      this.editConfigCom.attribute.list[this.listIndex].navigateOptions = e;
      this.isShowNavigation = false;
    },
  },
};
</script>

<style scoped lang="scss">
.navigate {
  .choose-page {
    margin-left: 10px;
    color: $u-primary;
    border-bottom: 1px solid $u-primary;
  }
  ::v-deep.u-cell__body {
    padding: 0 !important;
  }
  ::v-deep.cell__body {
    padding: 10px 0 !important;
  }
  &-input {
    width: 100%;
  }
}
</style>
